import styled from "styled-components";
import React, { useRef, useState, useEffect } from "react";

function Header({ className }) {
	const [showNoti, setShowNoti] = useState(false);
	useEffect(() => {
		window.apiStateCb = setShowNoti;
		return () => {
			delete window.apiStateCb;
		}
	},[]);
	return (
		<div className={className}>
			{showNoti && <div className="api-state-noti">API network error,using cached data.</div>}
			<div>
				<a href="https://cess.network/" target="_blank">
					<img width={18} height={18} src={process.env.PUBLIC_URL + "/img/footer/footer-0.png"} />
				</a>
				<a href="https://twitter.com/CESS_Storage" target="_blank">
					<img width={14} height={14} src={process.env.PUBLIC_URL + "/img/footer/footer-1.png"} />
				</a>
				<a href="https://t.me/CESS_Storage_official" target="_blank">
					<img width={16} height={16} src={process.env.PUBLIC_URL + "/img/footer/footer-2.png"} />
				</a>
				<a href="https://discord.com/invite/cess" target="_blank">
					<img width={16} height={13} src={process.env.PUBLIC_URL + "/img/footer/footer-3.png"} />
				</a>
				<a href="https://medium.com/@CESS_LAB" target="_blank">
					<img width={22} height={14} src={process.env.PUBLIC_URL + "/img/footer/footer-4.png"} />
				</a>
				<a href="https://github.com/CESSProject" target="_blank">
					<img width={16} height={16} src={process.env.PUBLIC_URL + "/img/footer/footer-5.png"} />
				</a>
				<a href="https://www.linkedin.com/company/cumulus-encrypted-storage-system" target="_blank">
					<img width={25} height={25} src={process.env.PUBLIC_URL + "/img/footer/footer-6.svg"} />
				</a>
			</div>
			<span>CESSSCAN © {new Date().getFullYear()}</span>
		</div>
	);
}

export default styled(Header)`
	display: flex;
	width: 100%;
	height: 110px;
	background-color: #000;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.api-state-noti{
		display: block;
		width: 100%;
		height: 36px;
		line-height: 36px;
		background-color: #FFEB3B;
		color: red;
		font-size: 12px;
		text-align: center;
		position: fixed;
		left: 0px;
		right: 0px;
		bottom: 0px;
	}
	div {
		height: 60px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		a {
			margin:0 10px;
			text-align: center;
		}
	}
	span {
		width: 100%;
		display: block;
		overflow: hidden;
		text-align: center;
		color: #fff;
		font-size: 13px;
	}
`;
